<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <!-- 新建定制项目 -->
        <title><spring:message code="custom_create_title"/></title>
        <meta name="decorator" content="default" />
        <%@ include file="/WEB-INF/views/include/head.jsp"%>
        <link rel="stylesheet" href="${ctxStatic}/css/layerSm.css">
        <script type="text/javascript">
            var windowH = window.innerHeight || document.documentElement.clientHeight
                || document.body.clientHeight
            $('.middle').css('height', windowH - 50);
            var lettersnumbers=/^[0-9a-zA-Z_\s?]*$/;
            // 初始加载
            $(document).ready(function(){
        
                // 下拉选框带搜索功能
                $("#styleCategoryCD").select2();
                $("#itemCategoryCD").select2();
                var number = 0;
                $("[name='subItemValues']").each(function(i){
                    number = number+1;
                });
        
                if (number> 0) {
                // 添加样式
                    $('#subItemsList').addClass("tabScroll");
                    var theadW = $('.tabScroll thead').width()
                    var theadTh = $('.tabScroll thead tr th').length
                    $('.tabScroll thead tr th').width(theadW/theadTh)
                    $('.tabScroll tbody tr:first-child td').each(function(){
                        var indexNum = $(this).index()
                        var tdWidth = $('.tabScroll tbody tr:first-child td').eq(indexNum).css('width')
                        $('.tabScroll thead tr th').eq(indexNum).width(tdWidth);
                    })
                } 

            });

            // 删除操作
            function deleltChild(delIndex) {

                $.post("${ctx}/custom/customitem/deleteSubDesignOption?delIndex=" + delIndex, "", function(result) {
                    var h = $(callBackHtml(result)).find("#subItem").html();
                    $('#subItem').html(h);
                    $('#subItemsList').addClass("tabScroll");
                    var theadW = $('.tabScroll thead').width()
                    var theadTh = $('.tabScroll thead tr th').length
                    $('.tabScroll thead tr th').width(theadW/theadTh)
                    $('.tabScroll tbody tr:first-child td').each(function(){
                        var indexNum = $(this).index()
                        var tdWidth = $('.tabScroll tbody tr:first-child td').eq(indexNum).css('width')
                        $('.tabScroll thead tr th').eq(indexNum).width(tdWidth);
                    })
                }, 'html');
            }
 
            // 新建子项
            function createSubItem(delIndex) {
                // 项目值不能为空
                if ($('#itemCD').val() != null
                    && $('#itemCD').val() != 'null'
                    && $('#itemCD').val().trim() != ''
                    && $('#itemCD').val().trim() != $('#itemValue').val().trim() != ''
                    &&lettersnumbers.test($("#itemCD").val())
                    &&lettersnumbers.test($("#itemValue").val())) {
                    popup('800px','550px','${ctx}/custom/customitem/createSubItem?itemCD=' + $('#itemValue').val() + '&delIndex=' + delIndex);
    
                } else {

                // 请输入合法项目code！
                layer.msg('<spring:message code="custom_item_code_not_exist_alert"/>', {time:1000});

                }

            }

            // 重新加载子项
            function reloadSubItem() {
                $.post("${ctx}/custom/customitem/searchSubList?itemValue = " + $('#itemValue').val(), "", function(result) {
                    var h = $(callBackHtml(result)).find("#subItem").html();
                    $('#subItem').html(h);
                    // 添加样式
                    $('#subItemsList').addClass("tabScroll");
                    var theadW = $('.tabScroll thead').width()
                    var theadTh = $('.tabScroll thead tr th').length
                    $('.tabScroll thead tr th').width(theadW/theadTh)
                    $('.tabScroll tbody tr:first-child td').each(function(){
                        var indexNum = $(this).index()
                        var tdWidth = $('.tabScroll tbody tr:first-child td').eq(indexNum).css('width')
                        $('.tabScroll thead tr th').eq(indexNum).width(tdWidth);
                    })
                }, 'html');
        
            }
    
            // 子项值是否重复
            function isSubItemValueRepeate(itemValue,delIndex) {

                var number = 0;
                $("[name='subItemValues']").each(function(i){
                    if ($.trim(itemValue) == $.trim($(this).val()) && delIndex!=i ) {
                        number = number+1;
                    }
                });
        
                if (number> 0) {
                    return true;
                } else {
                    return false;
                }
            }
    
            // 保存方法
            var saveForm={
                s:null,
                t:null,
                save:function(s,t){
                    $(t).attr("disabled",true);
                    this.s=s;
                    this.t=t;
                    $("#inputForm").validate({
                        submitHandler : function() {
                            // 格式化，去除逗号
                            formUnFormat($("#inputForm"));
                            
                            var params = $("#inputForm").serialize();
                            $.post("${ctx}/custom/customitem/save", params, function(result) {
                                tipParent(result.message);
                                if(result.statusCode==STATUSCODEOK){
                            
                                    if (saveForm.s == 0) {
                                         window.parent.frames[0].location.reload();
                                         closeWin();
                                    }
                                    // 保存并继续
                                    else {
                                     $("#inputForm")[0].reset();
                                         // 下拉选框带搜索功能
                                         $("#styleCategoryCD").select2();
                                         $("#itemCategoryCD").select2();
                                         $(saveForm.t).attr("disabled",false);
                                     window.parent.frames[0].location.reload();
                                     reloadSubItem();
                                    }
                                   
                                }else{
                                    $(saveForm.t).attr("disabled",false);
                                }
                            }, 'json');
                        },
                        rules: {
                            itemCD: {remote: "${ctx}/custom/customitem/checkItemCd?oldItemCD=" + $('#oldItemCD').val()},

                            itemValue: {remote: "${ctx}/custom/customitem/checkItemValue?oldItemValue=" + $('#oldItemValue').val()},
                             },
                        messages: {
                            // 定制项目值已经存在！
                            itemCD: {remote: '<spring:message code="custom_item_cd_exist_alert"/>'},

                            // 定制项目值已经存在！
                            itemValue: {remote: '<spring:message code="custom_item_value_exist_alert"/>'},
                                  },
                        fail: function(element,e) {  
                            $(saveForm.t).attr("disabled",false);
                        }
                    });
                    $("#inputForm").submit(); 
                }
            }
        </script>
    </head>
    <body>
        <!--头部-->
        <form id="inputForm"　name="inputForm">
            <div id="createHead" class="layerHeader clearfix">
                <p class="headerTitle">
                    <!-- 编辑定制项目--><!-- 新建定制项目-->
                    <c:choose>
                        <c:when test="${not empty design.itemValue}"><spring:message code="custom_modify_title"/></c:when>
                        <c:otherwise><spring:message code="custom_create_title"/></c:otherwise>
                    </c:choose>
                </p>
                <div class="headerButton clearfix">
                    <div class="clearfix">
                        <!-- 取消 -->
                        <button type="button" onclick="closeWin()"><spring:message code="company_edit_cancle"/></button>
                        <shiro:hasPermission name="custom:customitem:edit">
                            <!-- 保存 -->
                            <button type="button" onclick="saveForm.save(0,this);"><spring:message code="common_save"/></button>
                            <c:if test="${empty design.id}">
                                <!-- 保存并继续 -->
                                <button type="button"  onclick="saveForm.save(1,this);"><spring:message code="common_save_continue"/></button>
                            </c:if>
                        </shiro:hasPermission>
                    </div>
                </div>
            </div>
            <!-- ID -->
            <input name="id" id="selfId" type="hidden" value="${design.id}"/>
            <input name="oldItemCD" id="oldItemCD" type="hidden" value="${design.itemCD}"/>
            <input name="version" id="version" type="hidden" value="${design.version}"/>
            <!-- 隐藏值 -->
            <!-- 表示父项目 -->
            <input name="itemSort" type="hidden" value="0"/>
            <!-- ID -->
            <!-- 是否是修改操作 -->
            <c:if test="${not empty design.itemValue}">
                <input name="updateFlag" type="hidden"  value="1">
            </c:if>
            <div  class="tabBoxSm ">
                <div class="tabSm smOrderBox">
                    <div class="clearfix">
                        <!-- 款式类别 -->
                        <div class="col-50 items clearfix haveToBox">
                        <!-- 款式类别 -->
                        <p class="tit"><spring:message code="custom_style_category"/></p>
                        <!-- 请输入项目类别 -->
                        <c:set value="<%=ResourcesUtil.getConfig(\"style_category\")%>" var="styleCategoryList" />
                        <select class="sex"   style="width:150px" id="styleCategoryCD" name="styleCategoryCD" data-rule-required="true" data-msg-required="<spring:message code="custom_style_alert"/>">
                            <!--请输入款式-->
                            <option value=''><spring:message code="custom_style_alert"/></option>
                            <c:forEach items="${fns:getDictList(styleCategoryList)}" var="styleCategory">
                                <option  <c:if test="${fn:split(design.styleCategoryCD,'-')[1] eq  styleCategory.itemValue}">selected="selected"</c:if> value="${styleCategory.itemCode}-${styleCategory.itemValue}">${styleCategory.itemName}</option>
                            </c:forEach>
                        </select>
                        <p class="haveTo">*</p>
                        </div>
                        <!--项目类别 -->
                        <div class="col-50 items clearfix haveToBox">
                        <!--项目类别 -->
                        <p class="tit"><spring:message code="custom_item_category"/></p>
                        <!-- 请输入项目类别 -->
                        <c:set value="<%=ResourcesUtil.getConfig(\"item_type_cd\")%>" var="itemTypeCdList" />
                        <select class=""  style="width:150px" name="itemCategoryCD" id="itemCategoryCD" data-rule-required="true" data-msg-required="<spring:message code="custom_item_cd_alert"/>">
                            <option value=""><spring:message code="custom_item_cd_alert"/></option>
                            <c:forEach items="${fns:getDictList(itemTypeCdList)}" var="itemTypeCdItem">
                                <option value="${itemTypeCdItem.itemCode}-${itemTypeCdItem.itemValue}" <c:if test="${fn:split(design.itemCategoryCD,'-')[1] eq  itemTypeCdItem.itemValue}">selected="selected"</c:if>>${itemTypeCdItem.itemName}</option>
                            </c:forEach>
                        </select>
                        <p class="haveTo">*</p>
                    </div>
                 </div>
                    <div class="clearfix">
                        <div class="col-50 items clearfix haveToBox">
                        <!-- 项目CODE -->
                            <p class="tit" style="line-height: 17px;margin-top: 5px;"><spring:message code="custom_project_cd" /></p>
                            <input type="text" value="${design.itemCD}" name="itemCD" id="itemCD" maxlength="50" class="form-control"
                                data-rule-required="true"  data-msg-required="<spring:message code="custom_item_code_alert" />"
                                data-rule-lettersnumbers="true" data-msg-lettersnumbers="<spring:message code="custom_item_code_not_exist_alert" />">
                            <p class="haveTo">*</p>
                        </div>
                        <div class="col-50 items clearfix haveToBox">
                        <!--项目值 -->
                        <p class="tit">
                            <spring:message code="custom_item_value" />
                        </p>
                        <input type="text" value="${design.itemValue}" name="itemValue"  id="itemValue" maxlength="50" class=""
                               data-rule-notEqualTo="#itemCD"  data-msg-notEqualTo="<spring:message code="custom_code_value_not_repeate_alert" />"
                            data-rule-required="true" data-msg-required="<spring:message code="custom_item_value_alert" />"
                            data-rule-lettersnumbers="true" data-msg-lettersnumbers="<spring:message code="custom_item_value_not_exist_alert" />" >
                        <p class="haveTo">*</p>
                    </div>
                        <input type="hidden" id="oldItemValue" name="oldItemValue" value="${design.itemValue}"  ></input>
                    </div>
                    <div class="clearfix">
                        <div class="col-50 items clearfix haveToBox">
                            <!--中文全称-->
                            <p class="tit"><spring:message code="custom_item_cn"/></p>
                            <input type="text" value="${design.itemNameCN}" name="itemNameCN" maxlength="50" class="form-control" data-rule-required="true" data-msg-required="<spring:message code="custom_item_cn_alert" />">
                            <p class="haveTo">*</p>
                        </div>
                        <div class="col-50 items clearfix haveToBox">
                            <!-- 英文全称-->
                            <p class="tit"><spring:message code="custom_item_en"/></p>
                            <input type="text" value="${design.itemNameEN}" name="itemNameEN" maxlength="50" class="form-control" data-rule-required="true" data-msg-required="<spring:message code="custom_item_en_alert" />">
                            <p class="haveTo">*</p>
                        </div>
                    </div>
                    <div class="clearfix">
                        <div class="col-50 items clearfix haveToBox">
                            <!--日文全称-->
                             <p class="tit"><spring:message code="custom_item_jp"/></p>
                             <input type="text" value="${design.itemNameJP}" name="itemNameJP" maxlength="50" class="form-control" data-rule-required="true" data-msg-required="<spring:message code="custom_item_jp_alert" />">
                            <p class="haveTo">*</p>
                        </div>
                        <div class="col-50 items clearfix ">&nbsp;</div>
                     </div>
                </div>
                <div class="">
                    <div class="tableArea">
                        <div style="float: left;">
                            <div style="float: left;margin-left: 10px">
                                <p class="tit"><spring:message code="custom_sub_item"/>
                                </p>
                            </div>
                        </div>
                        <div style="float: left;margin-left: 10px">
                            <!-- 选择添加 -->
                            <button type="button" onclick="createSubItem(-1)"><spring:message code="custom_choose_add"/></button>
                        </div>
                        <!-- 子项显示区 -->
                         <div class="tableScroll tableScrollSm" style="padding-top: 0px;margin-left: 80px" >
                             <div style = "overflow: auto; position: relative;background-color:#ddd;">
                                 <table cellpadding="0" class="" name ="perantTable" id ="perantTable"  style="border: none">
                                        <tr>
                                            <!-- 项目图片 -->
                                            <th class="table-gszhkhmc" style="border: none"><spring:message code="custom_item_file" /></th>
                                            <!-- 项目值-->
                                            <th class="table-gszhkhmc" style="border: none"><spring:message code="custom_item_value" /></th>
                                            <!-- 项目费用-->
                                            <th class="table-gszhkhmc" style="border: none"> <spring:message code="custom_item_cost" /></th>
                                            <!-- 中文全称-->
                                            <th class="table-gszhkhsj" style="border: none"><spring:message code="custom_item_cn" /></th>
                                            <!-- 英文全称-->
                                            <th class="table-gszhkhsj" style="border: none"><spring:message code="custom_item_en" /></th>
                                            <!-- 日文全称-->
                                            <th class="table-gszhkhsj" style="border: none"><spring:message code="custom_item_jp" /></th>
                                            <!-- 操作-->
                                            <th class="table-gszhkhsj" style="border: none"><spring:message code="custom_operation" /></th>
                                        </tr>
                                 </table>
                             </div>
                             <div style = "overflow: auto; position: relative;background-color:#fff;border:1px solid #B7B9B8;height:140px;">
                                 <table cellpadding="0" class="" name ="perantTable" id ="subItem" >
                                     <tbody>
                                        <c:forEach items="${list}" var="designerOption" varStatus="status">
                                            <c:if test="${designerOption.deleteFlag != '1'}">
                                                <tr>
                                                <!-- 项目图片 -->
                                                    <td style="border: none;border-bottom:1px solid #B7B9B8; border-right:1px solid #B7B9B8;" class="">
                                                        <p class="table-gszhkhmc">
                                                        <c:if test="${not empty designerOption.uploadFile.showImgUrl}">
                                                            <img src="${designerOption.uploadFile.showImgUrl}" class="tableImg">
                                                            <img src="${designerOption.uploadFile.showImgUrl}" class="posImg">
                                                        </c:if>
                                                        <c:if test="${empty designerOption.uploadFile.showImgUrl}">
                                                            <img src="${ctxStatic}/images/pic-none.jpg" class="tableImg">
                                                        </c:if>
                                                        </p>
                                                    </td>
                                                    <!-- 项目值 -->
                                                    <td style="border: none;border-bottom:1px solid #B7B9B8; border-right:1px solid #B7B9B8"; class="table-gszhkhmc">${designerOption.itemValue}<input name="subItemValues" type="hidden" value="${designerOption.itemValue}"/></td>
                                                    <!-- 项目费用 -->
                                                    <td style="border: none;border-bottom:1px solid #B7B9B8; border-right:1px solid #B7B9B8"; class="table-gszhkhmc" ><fmt:formatNumber value="${designerOption.itemCost}" pattern="#,##0.00#"/></td>
                                                    <!-- 中文全称 -->
                                                    <td style="border: none;border-bottom:1px solid #B7B9B8; border-right:1px solid #B7B9B8"; class="table-gszhkhsj"><p>${designerOption.itemNameCN}</p></td>
                                                    <!-- 英文全称 -->
                                                    <td style="border: none;border-bottom:1px solid #B7B9B8; border-right:1px solid #B7B9B8"; class="table-gszhkhsj"><p>${designerOption.itemNameEN}</p></td>
                                                    <!-- 日文全称 -->
                                                    <td style="border: none;border-bottom:1px solid #B7B9B8; border-right:1px solid #B7B9B8"; class="table-gszhkhsj"><p>${designerOption.itemNameJP}</p></td>
                                                    <td style="border: none;border-bottom:1px solid #B7B9B8; border-right:1px solid #B7B9B8"; class="table-gszhkhsj">
                                            <%--        <img src="${ctxStatic}/images/btn-bj.png" onclick="createSubItem(${status.index})">
                                                    <img src="${ctxStatic}/images/btn-sc.png" onclick="del(${status.index})">--%>
                                                     <button onclick="createSubItem(${status.index})" type="button"><spring:message code="company_edit_edit"/></button>
                                                     <button onclick="deleltChild(${status.index})" type="button" ><spring:message code="company_edit_delete"/></button>
                                                    </td>
                                                </tr>
                                            </c:if>
                                        </c:forEach>
                                    </tbody>
                                </table>
                                 <div id="hiddenHtml"></div>
                            </div>
                        </div>
                </div>
                 </div>
                <div class="tabSm smOrderBox">
                    <div class="clearfix">
                        <!-- 状态 -->
                        <div class="col-50 items clearfix">
                            <p class="tit"><spring:message code="common_status"/></p>
                            <div class="labelBox">
                                <!-- 启用 -->
                                <!-- 停用 -->
                                <c:choose>
                                    <c:when test="${not empty design.enableFlag}">
                                        <label ><input type="radio" name="enableFlag" value="1" <c:if test="${design.enableFlag eq 1 }"> checked="checked"</c:if>><spring:message code="common_enable"/></label>
                                        <label ><input type="radio" name="enableFlag" value="0" <c:if test="${design.enableFlag eq 0 }"> checked="checked"</c:if>><spring:message code="common_disable"/></label>
                                    </c:when>
                                    <c:otherwise>
                                        <label ><input type="radio" name="enableFlag" value="1"  checked='checked'><spring:message code="common_enable"/></label>
                                        <label ><input type="radio" name="enableFlag" value="0"><spring:message code="common_disable"/></label>
                                    </c:otherwise>
                                </c:choose>
                            </div>
                        </div>
                        <!-- 必须项目 -->
                        <div class="col-50 items clearfix">
                            <p class="tit"><spring:message code="custom_have_to_item"/></p>
                            <!-- 必须 -->
                            <!-- 非必须 -->
                            <div class="labelBox">
                                <c:choose>
                                    <c:when test="${not empty design.haveToFlag}">
                                        <label class="lbst"><input type="radio" name="haveToFlag" value="0" class="rast" <c:if test="${design.haveToFlag == 0 }"> checked="checked"</c:if>><spring:message code="custom_have_to"/></label>
                                        <label class="lbst"><input type="radio" name="haveToFlag" value="1" class="rast" <c:if test="${design.haveToFlag == 1 }"> checked="checked"</c:if>><spring:message code="custom_not_have_to"/></label>
                                    </c:when>
                                    <c:otherwise>
                                        <label class="lbst"><input type="radio" name="haveToFlag" value="0" class="rast"><spring:message code="custom_have_to"/></label>
                                        <label class="lbst"><input type="radio" name="haveToFlag" value="1" class="rast" checked='checked'><spring:message code="custom_not_have_to"/></label>
                                    </c:otherwise>
                                </c:choose>
                            </div>
                        </div>
                    </div>
                    <div class="items clearfix">
                    <!-- 描述 -->
                        <p class="tit"><spring:message code="custom_describe"/>
                            <span class="txtRg">(0/100)</span>
                        </p>
                            <!-- 请输入描述内容 -->
                            <textarea name="remarks" class="dsp" maxlength="100">${design.remarks}</textarea>
                    </div>
                </div>
            </div>
        </form>
        <script src="${ctxStatic}/layer/layerStyle.js"></script>
    </body>
</html>